import Image from "next/image";
import { useTranslations } from "next-intl";
import { ReactNode, useEffect, useState } from "react";
import { useCustomFetch } from "@/utils/network";
import {
  useParams,
  usePathname,
  useRouter,
  useSearchParams,
} from "next/navigation";
import CustomCollapsible from "@/components/custom-collapsible";
type IProps = {
  path: string;
  type: string;
  config: { key: string; i18n: any; title: string }[];
};
export default function SearchSection(props: IProps) {
  const [product, setProduct] = useState<any[]>([]);
  const [searchData, setSearchData] = useState<any>({});
  const router = useRouter();
  const params = useParams();
  const sP = useSearchParams();
  async function GetProduct(lang: string, path?: string) {
    const series = sP.get("series");
    const res = await useCustomFetch(
      `/product/search`,
      {
        Language: lang,
        Type: props.type,
        ...searchData,
        Series: series,
      },
      "POST"
    );
    if (res.code == 1) {
      setProduct([])
      return
    }
    setProduct(res.data);
  }
  function handleJumpProductClick(item: any) {
    router.push(
      `/${params.locale}/product-detail/${item.Language}/${item.Type}/${item.Series}/${item.Name}/${item.ID}`
    );
  }
  useEffect(() => {
    GetProduct(params.locale as string, props.path);
  }, [params, props, searchData]);
  return (
    <div className={"mt-10"}>
      <div className={" px-2 h-screen bg-gray-300"}>
        <ul className={"w-full h-full"}>
          {!product.length ? (
            <div className="text-center"> 没有数据</div>
          ) : (
            product.map((item) => {
              return (
                <li
                  onClick={() => handleJumpProductClick(item)}
                  key={item.ID}
                  className={
                    "float-left h-96 overflow-hidden sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 px-2 mb-2"
                  }
                >
                  <div
                    className={
                      "bg-white h-full cursor-pointer group hover-bottom-line py-6 rounded-lg"
                    }
                  >
                    <div className={"overflow-hidden h-60"}>
                      <img
                        className={
                          "max-h-60 transition-all duration-700 group-hover:scale-105 mx-auto max-w-full h-full object-cover"
                        }
                        alt={"-"}
                        width={200}
                        height={200}
                        src={JSON.parse(item.Cover)[0].url}
                      ></img>
                    </div>
                    <h1 className={"truncate w-full px-4 my-4 font-semibold"}>
                      {item.Name}
                    </h1>
                    <p className={"text-over-2 w-full px-4 text-gray-400"}>
                      {item.Desc}
                    </p>
                  </div>
                </li>
              );
            })
          )}
        </ul>
      </div>
    </div>
  );
}
